const socialIcons = [
  {
    title: "https://twitter.com/",
    svg: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32" class="icon">
  <g clip-path="url(#a)">
    <path fill="#F97247" fill-rule="evenodd" d="M0 16c0 8.82 7.176 16 16 16 8.82 0 16-7.18 16-16S24.82 0 16 0 0 7.18 0 16ZM5.942 4.97A14.877 14.877 0 0 1 16 1.065c3.87 0 7.4 1.479 10.056 3.901l-1.188 1.188A13.201 13.201 0 0 0 16 2.75c-3.412 0-6.522 1.29-8.87 3.407L5.941 4.969Zm-.974.974A14.877 14.877 0 0 0 1.066 16c0 3.87 1.479 7.4 3.9 10.055l1.188-1.187A13.201 13.201 0 0 1 2.75 16c0-3.41 1.288-6.52 3.405-8.869L4.968 5.944ZM5.94 27.03A14.877 14.877 0 0 0 16 30.934c3.87 0 7.4-1.478 10.055-3.9l-1.188-1.188A13.201 13.201 0 0 1 16 29.25c-3.412 0-6.523-1.29-8.871-3.407L5.94 27.03ZM30.934 16a14.88 14.88 0 0 1-3.905 10.06l-1.187-1.188A13.201 13.201 0 0 0 29.25 16c0-3.412-1.29-6.522-3.407-8.87l1.187-1.188A14.877 14.877 0 0 1 30.934 16Z" clip-rule="evenodd"/>
    <path fill="#191D0A" d="M21.312 13.539v.374c0 3.768-2.754 8.087-7.791 8.087a7.416 7.416 0 0 1-4.188-1.291 5.366 5.366 0 0 0 4.054-1.171 2.66 2.66 0 0 1-1.587-.56 2.83 2.83 0 0 1-.971-1.42c.17.037.344.056.519.056.243 0 .486-.034.72-.101a2.712 2.712 0 0 1-1.578-.985 2.902 2.902 0 0 1-.616-1.803v-.037c.38.22.805.34 1.24.351a2.823 2.823 0 0 1-1.15-1.705 2.92 2.92 0 0 1 .288-2.06 7.84 7.84 0 0 0 2.52 2.11c.974.513 2.04.806 3.13.862a2.479 2.479 0 0 1-.075-.651c-.02-.58.132-1.154.437-1.64a2.746 2.746 0 0 1 1.265-1.083 2.626 2.626 0 0 1 1.634-.132 2.703 2.703 0 0 1 1.41.867 5.493 5.493 0 0 0 1.74-.692 2.844 2.844 0 0 1-1.221 1.598 5.563 5.563 0 0 0 1.575-.471 5.74 5.74 0 0 1-1.355 1.497Z"/>
  </g>
  <defs>
    <clipPath id="a">
      <path fill="#fff" d="M0 0h32v32H0z"/>
    </clipPath>
  </defs>
</svg>
`,
  },
  {
    title: "https://ru.linkedin.com/",
    svg: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32" class="icon">
  <g clip-path="url(#a)">
    <path fill="#F97247" fill-rule="evenodd" d="M0 16c0 8.82 7.176 16 16 16 8.82 0 16-7.18 16-16S24.82 0 16 0 0 7.18 0 16ZM5.942 4.97A14.877 14.877 0 0 1 16 1.065c3.87 0 7.4 1.479 10.056 3.901l-1.188 1.188A13.201 13.201 0 0 0 16 2.75c-3.412 0-6.522 1.29-8.87 3.407L5.941 4.969Zm-.974.974A14.877 14.877 0 0 0 1.066 16c0 3.87 1.479 7.4 3.9 10.055l1.188-1.187A13.201 13.201 0 0 1 2.75 16c0-3.41 1.288-6.52 3.405-8.869L4.968 5.944ZM5.94 27.03A14.877 14.877 0 0 0 16 30.934c3.87 0 7.4-1.478 10.055-3.9l-1.188-1.188A13.201 13.201 0 0 1 16 29.25c-3.412 0-6.523-1.29-8.871-3.407L5.94 27.03ZM30.934 16a14.88 14.88 0 0 1-3.905 10.06l-1.187-1.188A13.201 13.201 0 0 0 29.25 16c0-3.412-1.29-6.522-3.407-8.87l1.187-1.188A14.877 14.877 0 0 1 30.934 16Z" clip-rule="evenodd"/>
    <path fill="#191D0A" d="M9.875 10.752c0-.484.403-.877.9-.877h10.45c.497 0 .9.393.9.877v10.496a.889.889 0 0 1-.9.877h-10.45a.889.889 0 0 1-.9-.877V10.752Zm3.784 9.378v-5.532h-1.838v5.532h1.838Zm-.918-6.287c.64 0 1.04-.425 1.04-.956-.012-.543-.399-.956-1.028-.956-.63 0-1.04.414-1.04.956 0 .531.398.955 1.016.955h.012Zm3.757 6.287v-3.09c0-.165.013-.33.062-.448.132-.33.434-.672.943-.672.665 0 .93.507.93 1.25v2.96h1.84v-3.173c0-1.7-.907-2.49-2.117-2.49-.975 0-1.413.536-1.658.914v.019h-.012l.012-.02v-.782h-1.837c.023.52 0 5.532 0 5.532h1.837Z"/>
  </g>
  <defs>
    <clipPath id="a">
      <path fill="#fff" d="M0 0h32v32H0z"/>
    </clipPath>
  </defs>
</svg>
`,
  },
  {
    title: "https://www.youtube.com/",
    svg: `  <svg
    class="icon"
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    fill="none"
    viewBox="0 0 32 32"
  >
    <g clip-path="url(#a)">
      <path
        fill="#f97247"
        fill-rule="evenodd"
        d="M0 16c0 8.82 7.176 16 16 16 8.82 0 16-7.18 16-16S24.82 0 16 0 0 7.18 0 16ZM5.942 4.97A14.877 14.877 0 0 1 16 1.065c3.87 0 7.4 1.479 10.056 3.901l-1.188 1.188A13.201 13.201 0 0 0 16 2.75c-3.412 0-6.522 1.29-8.87 3.407L5.941 4.969Zm-.974.974A14.877 14.877 0 0 0 1.066 16c0 3.87 1.479 7.4 3.9 10.055l1.188-1.187A13.201 13.201 0 0 1 2.75 16c0-3.41 1.288-6.52 3.405-8.869L4.968 5.944ZM5.94 27.03A14.877 14.877 0 0 0 16 30.934c3.87 0 7.4-1.478 10.055-3.9l-1.188-1.188A13.201 13.201 0 0 1 16 29.25c-3.412 0-6.523-1.29-8.871-3.407L5.94 27.03ZM30.934 16a14.88 14.88 0 0 1-3.905 10.06l-1.187-1.188A13.201 13.201 0 0 0 29.25 16c0-3.412-1.29-6.522-3.407-8.87l1.187-1.188A14.877 14.877 0 0 1 30.934 16Z"
        clip-rule="evenodd"
      />
      <path
        fill="#311212"
        d="m14.667 18 3.46-2-3.46-2v4Zm7.706-5.22c.087.313.147.733.187 1.267.047.533.067.993.067 1.393l.04.56c0 1.46-.107 2.533-.294 3.22-.166.6-.553.987-1.153 1.153-.313.087-.887.147-1.767.187a44.09 44.09 0 0 1-2.393.067l-1.06.04c-2.793 0-4.533-.107-5.22-.294-.6-.166-.987-.553-1.153-1.153-.087-.313-.147-.733-.187-1.267a16.042 16.042 0 0 1-.067-1.393l-.04-.56c0-1.46.107-2.533.294-3.22.166-.6.553-.987 1.153-1.153.313-.087.887-.147 1.767-.187a44.09 44.09 0 0 1 2.393-.067l1.06-.04c2.793 0 4.533.107 5.22.294.6.166.987.553 1.153 1.153Z"
      />
    </g>
    <defs>
      <linearGradient
        id="b"
        x1="32"
        x2="-5.647"
        y1="0"
        y2="9.412"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#F99247" />
        <stop offset="1" stop-color="#F29DA2" />
      </linearGradient>
      <clipPath id="a">
        <path fill="#fff" d="M0 0h32v32H0z" />
      </clipPath>
    </defs>
  </svg>
`,
  },
  {
    title: "https://www.tiktok.com/",
    svg: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32" class="icon">
  <g clip-path="url(#a)">
    <path fill="#F97247" fill-rule="evenodd" d="M0 16c0 8.82 7.176 16 16 16 8.82 0 16-7.18 16-16S24.82 0 16 0 0 7.18 0 16ZM5.942 4.97A14.877 14.877 0 0 1 16 1.065c3.87 0 7.4 1.479 10.056 3.901l-1.188 1.188A13.201 13.201 0 0 0 16 2.75c-3.412 0-6.522 1.29-8.87 3.407L5.941 4.969Zm-.974.974A14.877 14.877 0 0 0 1.066 16c0 3.87 1.479 7.4 3.9 10.055l1.188-1.187A13.201 13.201 0 0 1 2.75 16c0-3.41 1.288-6.52 3.405-8.869L4.968 5.944ZM5.94 27.03A14.877 14.877 0 0 0 16 30.934c3.87 0 7.4-1.478 10.055-3.9l-1.188-1.188A13.201 13.201 0 0 1 16 29.25c-3.412 0-6.523-1.29-8.871-3.407L5.94 27.03ZM30.934 16a14.88 14.88 0 0 1-3.905 10.06l-1.187-1.188A13.201 13.201 0 0 0 29.25 16c0-3.412-1.29-6.522-3.407-8.87l1.187-1.188A14.877 14.877 0 0 1 30.934 16Z" clip-rule="evenodd"/>
    <path fill="#191D0A" fill-rule="evenodd" d="M17.012 9.925c.373 0 .675.302.675.675a2.7 2.7 0 0 0 2.7 2.7.675.675 0 1 1 0 1.35 4.05 4.05 0 0 1-2.7-1.032V18.7a3.375 3.375 0 1 1-3.375-3.375.675.675 0 1 1 0 1.35 2.025 2.025 0 1 0 2.025 2.025v-8.1c0-.373.303-.675.675-.675Z" clip-rule="evenodd"/>
  </g>
  <defs>
    <clipPath id="a">
      <path fill="#fff" d="M0 0h32v32H0z"/>
    </clipPath>
  </defs>
</svg>
`,
  },
  {
    title: "https://web.telegram.org/",
    svg: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32" class="icon">
  <g clip-path="url(#a)">
    <path fill="#F97247" fill-rule="evenodd" d="M0 16c0 8.82 7.176 16 16 16 8.82 0 16-7.18 16-16S24.82 0 16 0 0 7.18 0 16ZM5.942 4.97A14.877 14.877 0 0 1 16 1.065c3.87 0 7.4 1.479 10.056 3.901l-1.188 1.188A13.201 13.201 0 0 0 16 2.75c-3.412 0-6.522 1.29-8.87 3.407L5.941 4.969Zm-.974.974A14.877 14.877 0 0 0 1.066 16c0 3.87 1.479 7.4 3.9 10.055l1.188-1.187A13.201 13.201 0 0 1 2.75 16c0-3.41 1.288-6.52 3.405-8.869L4.968 5.944ZM5.94 27.03A14.877 14.877 0 0 0 16 30.934c3.87 0 7.4-1.478 10.055-3.9l-1.188-1.188A13.201 13.201 0 0 1 16 29.25c-3.412 0-6.523-1.29-8.871-3.407L5.94 27.03ZM30.934 16a14.88 14.88 0 0 1-3.905 10.06l-1.187-1.188A13.201 13.201 0 0 0 29.25 16c0-3.412-1.29-6.522-3.407-8.87l1.187-1.188A14.877 14.877 0 0 1 30.934 16Z" clip-rule="evenodd"/>
    <path fill="#191D0A" d="M20.644 11.132s1.133-.442 1.038.631c-.031.442-.314 1.989-.535 3.662l-.755 4.955s-.063.726-.63.852c-.566.126-1.416-.442-1.574-.568-.126-.095-2.36-1.515-3.147-2.21-.221-.189-.473-.567.031-1.01l3.305-3.156c.378-.378.755-1.262-.819-.189l-4.407 2.998s-.503.316-1.447.032l-2.047-.631s-.755-.474.535-.947c3.148-1.483 7.02-2.998 10.451-4.419Z"/>
  </g>
  <defs>
    <clipPath id="a">
      <path fill="#fff" d="M0 0h32v32H0z"/>
    </clipPath>
  </defs>
</svg>
`,
  },
  {
    title: "https://vk.com/",
    svg: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32" class="icon">
  <g clip-path="url(#a)">
    <path fill="#F97247" fill-rule="evenodd" d="M0 16c0 8.82 7.176 16 16 16 8.82 0 16-7.18 16-16S24.82 0 16 0 0 7.18 0 16ZM5.942 4.97A14.877 14.877 0 0 1 16 1.065c3.87 0 7.4 1.479 10.056 3.901l-1.188 1.188A13.201 13.201 0 0 0 16 2.75c-3.412 0-6.522 1.29-8.87 3.407L5.941 4.969Zm-.974.974A14.877 14.877 0 0 0 1.066 16c0 3.87 1.479 7.4 3.9 10.055l1.188-1.187A13.201 13.201 0 0 1 2.75 16c0-3.41 1.288-6.52 3.405-8.869L4.968 5.944ZM5.94 27.03A14.877 14.877 0 0 0 16 30.934c3.87 0 7.4-1.478 10.055-3.9l-1.188-1.188A13.201 13.201 0 0 1 16 29.25c-3.412 0-6.523-1.29-8.871-3.407L5.94 27.03ZM30.934 16a14.88 14.88 0 0 1-3.905 10.06l-1.187-1.188A13.201 13.201 0 0 0 29.25 16c0-3.412-1.29-6.522-3.407-8.87l1.187-1.188A14.877 14.877 0 0 1 30.934 16Z" clip-rule="evenodd"/>
    <path fill="#191D0A" fill-rule="evenodd" d="M9.311 12.54a.317.317 0 0 1 .26-.14h2.213a.32.32 0 0 1 .29.193c.135.298.265.599.395.897.3.69.593 1.365.908 1.938.223.406.446.738.673.974.096.1.19.18.28.239v-2.82l-.662-.867a.356.356 0 0 1-.04-.36.32.32 0 0 1 .29-.194h3.075c.178 0 .322.152.322.34v3.187c.368-.383.655-.82.918-1.288.151-.27.292-.545.435-.827l.105-.205c.18-.35.369-.709.585-1.054a.318.318 0 0 1 .268-.153h2.119c.1 0 .194.049.255.133a.355.355 0 0 1 .056.294c-.405 1.623-1.195 2.757-1.948 3.837l-.089.128a10.327 10.327 0 0 1 2.403 3.476.357.357 0 0 1-.024.324.318.318 0 0 1-.27.155h-2.33a.312.312 0 0 1-.211-.082 6.944 6.944 0 0 1-.654-.706l-.117-.142a10.433 10.433 0 0 0-.453-.526c-.298-.315-.618-.573-1.048-.717v1.833c0 .171-.12.316-.282.337-2.614.351-4.372-1.007-5.556-2.747-1.138-1.671-1.773-3.73-2.174-5.032l-.037-.12a.356.356 0 0 1 .045-.305Zm.705.54c.404 1.298.997 3.07 1.984 4.52 1.049 1.54 2.517 2.682 4.671 2.5v-1.953c0-.099.04-.193.112-.258a.31.31 0 0 1 .258-.078c.808.13 1.34.536 1.778 1 .172.182.334.379.489.567l.109.132c.165.198.327.386.503.557h1.696a9.58 9.58 0 0 0-2.239-2.962.354.354 0 0 1-.053-.46c.088-.13.177-.256.264-.383.682-.98 1.332-1.914 1.726-3.181h-1.512c-.162.273-.312.557-.462.85l-.102.2c-.144.282-.292.572-.45.855-.396.704-.874 1.395-1.608 1.948a.308.308 0 0 1-.335.025.343.343 0 0 1-.174-.302V13.08h-2.078l.31.405c.046.06.071.136.071.214v3.42a.35.35 0 0 1-.107.254.31.31 0 0 1-.252.084c-.393-.049-.73-.273-1.017-.57-.286-.298-.542-.69-.778-1.119-.331-.602-.645-1.325-.952-2.03a81.63 81.63 0 0 0-.288-.659h-1.564Z" clip-rule="evenodd"/>
    <path fill="#191D0A" d="M12 17.6c-.987-1.45-1.58-3.222-1.984-4.52h1.564c.096.215.192.436.288.659.307.705.62 1.428.952 2.03.236.43.492.821.778 1.119.287.297.623.521 1.017.57a.31.31 0 0 0 .252-.084.349.349 0 0 0 .107-.254V13.7a.352.352 0 0 0-.071-.214l-.31-.405h2.078v3.576c0 .127.067.244.174.302a.308.308 0 0 0 .335-.025c.734-.553 1.212-1.244 1.607-1.948.159-.283.307-.573.45-.856l.103-.199c.15-.293.3-.577.462-.85h1.512c-.394 1.267-1.044 2.201-1.726 3.181l-.264.382a.354.354 0 0 0 .053.46 9.58 9.58 0 0 1 2.239 2.963H19.92a7.05 7.05 0 0 1-.503-.557 35.681 35.681 0 0 1-.11-.132 11.327 11.327 0 0 0-.488-.567c-.438-.464-.97-.87-1.777-1a.31.31 0 0 0-.259.078.349.349 0 0 0-.112.258V20.1c-2.154.182-3.622-.96-4.671-2.5Z"/>
  </g>
  <defs>
    <clipPath id="a">
      <path fill="#fff" d="M0 0h32v32H0z"/>
    </clipPath>
  </defs>
</svg>
`,
  },
];

function renderSocialIcons() {
  const socialBtnsContainer = document.getElementById("social__btns");
  socialIcons.forEach((icon) => {
    const a = document.createElement("a");
    a.href = icon.title;
    a.target = "_blank";
    a.rel = "noopener noreferrer";
    a.classList.add("icon-link");
    a.innerHTML = icon.svg;
    socialBtnsContainer.appendChild(a);

    a.addEventListener("mouseenter", function () {
      const svgIcon = this.querySelector(".icon");
      const path = svgIcon.querySelector("g > path");
      path.setAttribute("fill", "url(#b)");
    });

    a.addEventListener("mouseleave", function () {
      const svgIcon = this.querySelector(".icon");
      const path = svgIcon.querySelector("g > path");
      path.setAttribute("fill", "#f97247");
    });
  });
}

document.addEventListener("DOMContentLoaded", renderSocialIcons);
